import { Component, OnInit, Input } from '@angular/core';
import { AppGlobalService } from 'src/app/shared/service/app-global.service';
declare let echarts: any;
declare let $: any;
@Component({
  selector: 'app-performance-details-chart',
  templateUrl: './performance-details-chart.component.html',
  styleUrls: ['./performance-details-chart.component.scss'],
})
export class PerformanceDetailsChartComponent implements OnInit {
  @Input() tagData: any;
  constructor(
    public appGlobalService: AppGlobalService

  ) { }
  gaugeData: any;
  option: any;
  ListArr: any = [];
  total: any; // 总数
  colorArr: any = [];
  valueArr: any = [];
  count = 0;
  color: any;
  chartColor = ["#FFD82B", "#FE950D", "#FF2B4B", "#A72AFA"];
  ngOnInit() {
    if (this.tagData.data && this.tagData.data.totalCountValue) {
      this.total = Number(this.tagData.data.total);  // 金额总额
    }
    if (this.tagData.data && this.tagData.data.data && this.tagData.data.data.length > 0) {
      this.tagData.data.data.forEach(e => {
        this.ListArr.push(e.amount);   // 单项业绩金额
      });
    }
    this.ListArr.forEach((e, index) => {
      if (e && e !== 0) {
        this.color = [];
        e = Number(e);
        // this.count += (e / this.total);
        // this.color = [this.count, this.chartColor[index]];
        // this.colorArr.push(this.color);

        this.count += (e / this.total);
        this.count = Number(this.count.toFixed(3));
        this.valueArr.push(this.count * 100);
      } else {
        this.valueArr.push(0);
      }
    });
    this.option = {
      angleAxis: {
        show: false,
        max: 100 * 360 / 230, // -25度到205度，二者偏移值是270度除360度
        type: 'value',
        startAngle: 205, // 极坐标初始角度
        splitLine: {
          show: false
        }
      },
      barMaxWidth: 12, // 圆环宽度
      radiusAxis: {
        show: false,
        type: 'category',
      },
      // 圆环位置和大小
      polar: {
        center: ['50%', '60%'],
        radius: '210'
      },
      series: [
        {
          type: 'bar',
          data: [{ // 上层圆环，显示数据
            value: 25,
            itemStyle: {
              color: "#FFD82B",
            },
          }],
          barGap: '-100%', // 柱间距离,上下两层圆环重合
          coordinateSystem: 'polar',
          roundCap: true, // 顶端圆角
          z: 4 // 圆环层级，同zindex
        },
        { // 下层圆环，显示最大值
          type: 'bar',
          data: [{
            value: 50,
            itemStyle: {
              color: '#FE950D'
            }
          }],
          barGap: '-100%',
          coordinateSystem: 'polar',
          roundCap: true,
          z: 3
        },
        { // 下层圆环，显示最大值
          type: 'bar',
          data: [{
            value: 75,
            itemStyle: {
              color: '#FF2B4B'
            }
          }],
          barGap: '-100%',
          coordinateSystem: 'polar',
          roundCap: true,
          z: 2
        },
        { // 下层圆环，显示最大值
          type: 'bar',
          data: [{
            value: 100,
            itemStyle: {
              color: '#A72AFA'
            }
          }],
          barGap: '-100%',
          coordinateSystem: 'polar',
          roundCap: true,
          z: 1
        },
      ]
    },

    setTimeout(() => {
      // this.option = {
      //   series: [{
      //     type: "gauge",
      //     radius: "100%",
      //     // 开始角度
      //     startAngle: 210,
      //     // 结束角度
      //     endAngle: -30,
      //     center: ["50%", "50%"],
      //     progress: {
      //       show: false,
      //     },
      //     pointer: {
      //       show: false,
      //     },
      //     axisLine: {
      //       lineStyle: {
      //         color: this.colorArr,
      //         width: 14,
      //       },
      //       roundCap: true,
      //     },
      //     axisTick: {
      //       show: false,
      //     },
      //     splitLine: {
      //       show: false,
      //     },
      //     axisLabel: {
      //       show: false,
      //     },
      //     anchor: {
      //       show: false,
      //     },
      //     title: {
      //       show: false,
      //     },
      //     detail: {
      //       show: false,
      //     },
      //   }]
      // },
      this.option.series.forEach((e, index) => {
        if (e.data[0].value && e.data[0].value > 0) {
          e.data[0].value = this.valueArr[index];
          e.data[0].itemStyle.color = this.chartColor[index];
        }
      });

      this.gauge(this.option);
    }, 20);
  }

  gauge(option) {
    const chartDom = document.getElementById('container');
    const myChart = echarts.init(chartDom);
    myChart.setOption(option);
  }

  chartPoint(e, i) {
    e.stopPropagation();
    i = Number(i) + 1;

    $(`#${this.appGlobalService.itemTabId}${i}`).click();
  }

}
